<template>
  <div>
    <div class="myheader">
      <el-input
        v-model="listQuery.worktype_name"
        placeholder="工种"
        style="width: 200px;left: 10px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >创建工种</el-button>
    </div>

    <el-table :data="tableData" border fit style="margin:0px auto;;width: 98.5%">
      <el-table-column align="center" prop="id" label="id" width="50" />
      <el-table-column align="center" prop="worktype_name" label="工种名称" />
      <el-table-column align="center" prop="content" label="工作内容" />
      <el-table-column align="center" prop="remark" label="备注" />
      <el-table-column align="center" prop="sub_name" label="分包单位" />

      
      
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button
            v-if="row.status!='deleted'"
            size="mini"
            type="danger"
            @click="del_address(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getTableData"
    />

    <el-dialog :visible.sync="dialogPvVisible" :title="dialogStatus=='create'?'添加工种':'修改工种'">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
       
         <!-- <el-form-item label="工种名称id" prop="staff_id">
          <el-input v-model="temp.staff_id" />
        </el-form-item>   -->
        <el-form-item label="站点">
                    <el-select
                        v-model="temp.station_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                    >
                        <el-option
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.station_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
        
        
        <el-form-item label="分包单位">
                    <el-select
                        v-model="temp.sub_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                        @change="getList($event)"
                    >
                        <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.subcontractors_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工种" prop="worktype_name">
          <el-input v-model="temp.worktype_name" />
        </el-form-item>
                <!-- <el-form-item label="工种">
                    <el-select
                        v-model="temp.worktype_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                    >
                        <el-option
                            v-for="item in options3"
                            :key="item.id"
                            :label="item.worktype_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item> -->
        
        <el-form-item label="工作内容" prop="content">
          <el-input v-model="temp.content" />
        </el-form-item>
        
        <el-form-item label="备注" prop="remark">
          <el-input v-model="temp.remark" />
        </el-form-item>
        

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPvVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="btnloading"
          @click="dialogStatus==='create'?createData():updateData()"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import $ from "jquery";
import waves from "@/directive/waves";
import ajax from "@/utils/myajax";
export default {
  components: { Pagination },
  directives: { waves },
  
  methods: {
    getList($event) {
            console.log(this.temp.sub_id);
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('worktype/SelectWorktype', { sub_id: this.temp.sub_id, section_id: me.temp.section_id }, function(data) {
                me.options3 = data;
            });
        },
    getTableData4() {
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('subcontractors/SelectSubcontractors', { section_id: me.temp.section_id }, function(data) {
                me.options2 = data;
            });
        },
        getTableData3() {
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp.section_id }, function(data) {
                me.options1 = data;
            });
        },
        
     getTableData1() {
            // let me = this;

            // ajax('behavior/select_behavior', {}, function(data) {
            //     me.options = data;
            //     // console.log(data);
            // });
        },
      
    getList() {
      var me = this;
      ajax("worktype/FindWorktype", this.listQuery, function(data) {
        me.tableData = data.items;
        me.total = data.total;
        me.listQuery.pageNo = data.pageNo;
        me.listQuery.pageSize = data.pageSize;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleUpdate(row) {
      this.dialogStatus = "update";
      this.dialogPvVisible = true;
      this.temp = Object.assign({}, row); // copy obj
      // 当更改data中数据后，得到更新后的DOM
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    del_address(row) {
      var me = this;
      this.$confirm("永久删除该部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ajax("worktype/DeleteWorktype", { id: row.id }, function(data) {
            if (data == 1) {
              me.$message({
                type: "success",
                message: "删除成功!"
              });
              me.getTableData();
            } else {
              me.$message({
                type: "success",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    resetTemp() {
      this.temp = {
        remark: "",
        staff_id: "",
        id: "",
        station_id:'',
        behavior_id:'',
        uptime:'',
        staff_card:''
       
      };
    },
    getTableData() {
      var me = this;
      me.listQuery.section_id = localStorage.getItem('section_id');
      ajax("worktype/FindWorktype", this.listQuery, function(data) {
        me.dialogPvVisible = false;
         me.tableData = data.items;
                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
      });
    },
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          var me = this;
          this.btnloading = true;
          ajax("worktype/UpdateWorktype", this.temp, function(data) {
            me.getTableData();
            me.dialogPvVisible = false;
            me.btnloading = false;
            me.$message({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
            me.resetTemp();
          }); 
        }
      });
    },
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    createData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          var me = this;
          this.btnloading = true;
          me.temp.section_id = localStorage.getItem('section_id');
          ajax("worktype/InsertWorktype", this.temp, function(data) {
            me.getTableData();
            me.dialogPvVisible = false;
            me.btnloading = false;
            me.$message({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogPvVisible = true;
      this.resetTemp();
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate(); //清除验证
      });
    }
  },

  data() {
    return {
      options3:[],
      options2:[],
      options1:[],
        options:[],
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        staff_id: "",
        section_id:'',
      },
      total: 100,
      rules: {
        img_url: [{ required: true, message: "照片不能为空！", trigger: "blur" }],
        nation: [{ required: true, message: "民族不能为空！", trigger: "blur" }],
        behavior_id:[{ required: true, message: "行为id不能为空！", trigger: "blur" }],
        
        staff_id: [{ required: true, message: "行为类型不能为空！", trigger: "blur" }],
        departmentname: [{ required: true, message: "部门不能为空！", trigger: "blur" }],
        phone: [{ required: true, message: "手机号不能为空！", trigger: "blur" }],
        integral: [{ required: true, message: "积分不能为空！", trigger: "blur" }],
        name: [{ required: true, message: "姓名不能为空！", trigger: "blur" }],
        sos_phone: [{ required: true, message: "紧急联系人行为id不能为空！", trigger: "blur" }],
        worktypename: [{ required: true, message: "工种不能为空！", trigger: "blur" }],
        createtime: [{ required: true, message: "入职时间不能为空！", trigger: "blur" }],
        name: [
          { required: true, message: "姓名不能为空！", trigger: "blur" }
        ],
        address: [
          { required: true, message: "行为id地址不能为空！", trigger: "blur" }
        ],
        id: [
          { required: true, message: "id不能为空！", trigger: "blur" }
        ]
      },
      temp: {

        remark: "",
        staff_id: "",
        behavior_id: "",
        id: "",
        station_id:'',
        section_id:'',
        uptime:'',
        worktype_name:'',
        staff_card:'',
      },
      dialogStatus: "create",
      dialogPvVisible: false,
      tableData: [
       
      ],
      btnloading: false
    };
  },
  created() {
    var me = this
    me.getTableData()
    me.getList()
    me.getTableData1();
        me.getTableData4();
        me.getTableData3();
  }
}
</script>
<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .pic>>>.el-upload--text{
      width:180px
  }
</style>